<template>
  <div>
    <el-input v-model="input1" placeholder="请输入内容">
      <template #prepend>Http://</template>
    </el-input>
    <div style="margin-top: 15px">
      <el-input placeholder="请输入内容" v-model="input2">
        <template #append>.com</template>
      </el-input>
    </div>
    <div style="margin-top: 15px">
      <el-input v-model="input3" placeholder="请输入内容" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="请选择">
            <el-option label="洗衣机" value="1"></el-option>
            <el-option label="冰箱" value="2"></el-option>
            <el-option label="空调" value="3"></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleSearch"></el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

export default defineComponent({
  setup() {
    const input1 = ref('')
    const input2 = ref('')
    const input3 = ref('')
    const select = ref('')

    const handleSearch = () => {
      console.log('搜索内容:', input3.value, '选择项:', select.value)
      // 这里可以添加实际的搜索逻辑
    }

    return {
      input1,
      input2,
      input3,
      select,
      Search,
      handleSearch
    }
  }
})
</script>


<style>
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input {
  background: #fff;
}

</style>
